<template>
  <div class="payment">
    <Header>
      <template slot="left">
        <p>
          <svg-icon iconClass="back" @click="$router.push('/layout/home')" />
        </p>
      </template>
      <template slot="center">
        <p>支付</p>
      </template>
      <template slot="right">
        <p></p>
      </template>
    </Header>

    <div class="payprice">
      <b></b>
      <b>￥{{this.$route.query.value}}</b>
      <b></b>
    </div>
    <div class="payments">
      <p class="p1">选择第三方支付方式</p>
      <van-radio-group v-model="radio">
        <van-cell-group>
          <div class="aaaa">
            <svg-icon iconClass="weixin"></svg-icon>
            <van-cell title="微信" clickable @click="radio = '1'">
              <template #right-icon>
                <van-radio name="1" />
              </template>
            </van-cell>
          </div>

          <!--  <svg-icon iconClass="weixin"></svg-icon> -->
          <div class="aaaa">
            <svg-icon iconClass="zhifubao"></svg-icon>
            <van-cell title="支付宝" clickable @click="radio = '2'">
              <template #right-icon>
                <van-radio name="2" />
              </template>
            </van-cell>
          </div>
          <!-- <svg-icon iconClass="weixin"></svg-icon> -->
          <div class="aaaa">
            <svg-icon iconClass="yinhangka"></svg-icon>
            <van-cell title="银行卡" clickable @click="radio = '3'">
              <template #right-icon>
                <van-radio name="3" />
              </template>
            </van-cell>
          </div>
        </van-cell-group>
      </van-radio-group>
    </div>
    <div class='paybutton'>
      <van-button round type="info" @click="show = true">确定</van-button>
    <Dialog :showoff="show" @close='close' :radio='radio'/>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import Dialog from '@/components/dialog.vue'
export default {
  components: {
    Header,
    Dialog
  },
  data() {
    return {
      radio: "1",
      show: false
    };
  },
  created() {
    console.log(this.radio);
  },
  methods:{
    payok(){
      console.log(this.radio);
    },
    close(val){
          this.show = val
      }
  }
};
</script>

<style lang="scss" scoped>
@import "@css/style.scss";
.payment {
  width: 100%;
  height: 100%;
  background: #f6f6f6;
  touch-action: none;
  .header {
    background: blueviolet;
  }
  .payprice {
    width: 100%;
    height: px2rem(150);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    b {
      font-size: px2rem(20);
      color: red;
    }
  }
  .payments {
    width: 100%;
    background: #fff;
    touch-action: none;
    .p1 {
      width: 100%;
      height: px2rem(40);
      border-bottom: 1px solid #ccc;
      border-top: 1px solid #ccc;
      line-height: px2rem(40);
      padding: 0 px2rem(10);
      font-size: px2rem(16);
      color: #a9a9a9;
    }
    p {
      width: 100%;
      height: px2rem(60);
      border-bottom: 1px solid #ccc;
      line-height: px2rem(60);
      padding: 0 px2rem(10);
    }
  }
  .aaaa {
    width: 100%;
    height: px2rem(60);
    padding: 0 px2rem(10);
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
    svg-icon {
      font-size: px2rem(14);
    }
  }
  .paybutton{
    width: 100%;
    padding: 0 px2rem(30);
    margin-top: px2rem(85);
    .van-button {
      width: 100%;
      height: px2rem(40);
    }
  }
}
</style>